iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
Modern Web

100 種 Figma 設計的方法|UI/UX 設計專欄系列 第 4

常見的 UI 介面插圖風格|100 種 Figma 設計的方法

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20240826/20163335dJKHuwKczQ.png

100 種 Figma 設計的方法|UI/UX 設計專欄

Figma 是一款 UI/UX 使用者介面與體驗設計軟體,專用於介面設計和原型製作,能讓多名設計師同時在同一專案上協作,這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯,並提供各種設計元件庫和擴充套件,方便設計師快速建立和調整設計。

Figma 不僅適用於設計師,也對開發者友好。開發者可以直接查看設計的樣式、間距等細節,並導出設計資產和切圖標註,這極大地縮短了設計與開發之間的溝通時間。

我們可以直接註冊並下載軟體到 Windows, macOS 使用,並且 Figma 是網頁瀏覽器就能打開的軟體,因此就算不安裝也可以在任何設備上使用,包括 Linux 作業系統等。


很開心這次可以挑戰鐵人賽!接下來的 30 天我會每天發佈一則關於 Figma 的小教學,並且為了能夠有體驗更好地學習軟體操作,也會搭配一支螢幕錄影的影片,可以點進 YouTube 頻道觀看順便訂閱噢!🥸


Yes
https://youtu.be/6Mm21BhcPag

常見的 UI 介面插圖風格覽

任何裝置的「介面」都是與使用者直接互動的關鍵因素之一

一個好的介面設計不僅可以提供好的體驗

還可以有效地傳達品牌價值觀

進而提升品牌識別度和影響力

在設計產品介面時

除了要考慮到使用者的需求和期望

同時運用視覺元素如:插畫、文字等

來建立獨特的品牌形象

其中插畫更是扮演著關鍵角色

它能夠為介面增添獨特的視覺魅力

加強「品牌形象的表達」來和使用者產生更多情感共鳴

對於初心者來說

了解和掌握不同的 UI 介面插圖風格是提升設計的關鍵

我們來看看有哪些常見的 UI 介面插圖風格:

1. 扁平風格(Flat Design)

扁平風格是 UI 設計中最受歡迎的一種風格

簡潔設計是它的特色

去除如漸變和陰影的裝飾元素

強調色彩鮮明和圖形簡單

這種風格易於理解和使用

適合應用在 App 和網站設計

2. 插畫風格(Illustrative Design)

這種風格適合用於品牌和內容呈現

如教育平台、娛樂和需要獨特樣式

公司的形象 App 和網站

插畫風格的設計

可以增加使用者的情感聯繫和參與感

3. 幾何風格(Geometric Design)

幾何風格利用簡單的幾何形狀

如圓形、方形和三角形

保有扁平化的簡潔

同時又更具有條理的設計

這種風格常見於科技產品

和數據後台等工具的 App 和網站

適合現代化和科技感強的介面設計

4. 3D 插圖風格(3D Illustration)

3D 插圖風格使用三維建模和渲染技術

具有比較多的真實感

這種風格適合用於產品展示、虛擬現實應用

和比較高端品牌

能夠提供更為沉浸的視覺體驗

5. 線條風格(Line Art)

線條風格主要使用線條構成圖形

簡潔明了具有簡約和優雅的特點

這種風格很適合健康與健身應用、資訊網站

和比較簡約品牌的設計中

能夠給人清新和專業的感覺

6. 漸變風格(Gradient Design)

漸變風格是利用漸層色來增加視覺吸引力和層次感

這種風格適合創意應用和娛樂性質的品牌中

能夠使介面更具動感和現代感

7. 手繪風格(Hand-drawn Design)

手繪風格強調手工繪製的自然感

帶有藝術性和親和力

有如名字一樣

這個風格很適合手工藝品、個人品牌

和兒童產品的設計

能夠增加產品的創意和個性化特點

同時也比起其他風格來的更親民

以上就是製作 UI 時常會使用的風格

在選擇要使用哪種風格時

第一首要考量的絕對是來自需求方的風格和氛圍

根據相對的風格選擇插畫的樣式

能使 UI 介面設計的層次更往上提高噢

關於作者

https://ithelp.ithome.com.tw/upload/images/20240826/20163335mzl3jzDv3m.png

設計師 Riven

資深數位產品設計師|虛擬 VTuber

社群傳送門 - https://portaly.cc/designer.riven

在 IT 和網路產業近十年的數位產品設計師,專注於 UI/UX 使用者介面與體驗設計領域,在全臺多間大專院校與社群機構擔任顧問及講師,並於國內外各大線上課程平台開立設計課程,目前已累積超過近萬名學員參與上課。

為 Adobe 官方合作的設計師兼 Insider,曾環島舉辦設計工作坊,並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會,並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。

常在 Medium 寫作設計上的知識與觀察,並得到官方認證 #Design 領域 Top Writer,同時也會在 YouTube 上製作影片教學設計的方法,近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。

▌擅長利用淺顯易懂的內容,將艱難的設計與開發技術,用任何人都能夠聽得懂的語彙,說給每一個人聽。


上一篇
Figma 基本工具詳覽|100 種 Figma 設計的方法
下一篇
UI 字裡行間的字型學|100 種 Figma 設計的方法
系列文
100 種 Figma 設計的方法|UI/UX 設計專欄7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言